<template>
  <div class="app-container">
    <!-- <el-form :model="form" class="form-inline" ref="form" label-width="70px">
            <el-row :gutter="4">
                <el-col :lg="6" :xl="4"><el-form-item label="险种类型" style="width:100%">
                        <el-input v-model="form.user" placeholder="险种类型"></el-input>
                    </el-form-item></el-col>
                <el-col :lg="6" :xl="4"><el-form-item style="width:100%" label="保险名称">
                    <el-input v-model="form.user" placeholder="险种类型"></el-input>
                    </el-form-item></el-col>
                <el-col :lg="6" :xl="4">
                    <el-button type="primary" icon="el-icon-search" @click="getTableData">搜索</el-button>
                </el-col>
            </el-row>
        </el-form> -->
    <el-row>
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        @click="addInsuranceType"
        style="margin-bottom: 20px"
        >添加险种</el-button
      >
    </el-row>
    <el-table ref="table" :data="tableData">
      <el-table-column align="center" type="expand" style="padding: 30px">
        <template slot-scope="scope">
          <el-table
            ref="table2"
            :data="scope.row.children"
            style="padding: 10px 50px"
          >
            <el-table-column align="center" prop="insureName" label="保险名称">
            </el-table-column>
            <!-- <el-table-column prop="clause" label="适用条款"> </el-table-column> -->
            <el-table-column align="center" label="操作">
              <template slot-scope="scope" v-if="scope.row.roleId !== 1">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="editInsure(scope.row)"
                  >修改</el-button
                >
                <el-button
                  v-if="scope.row.status !== '通过'"
                  size="mini"
                  type="text"
                  icon="el-icon-document-checked"
                  @click="deleteInsure(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="insureTypeName" label="险种类型">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="addInsurance(scope.row)"
            >添加保险</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="editInsuranceType(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="delInsuranceType(scope.row.insureTypeId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <view-or-examine
      :getTableData="getTableData"
      ref="viewOrExamine"
    ></view-or-examine>
    <el-dialog
      :title="insureTypeTitle"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form
        :model="addInsuranceTypeForm"
        ref="addInsuranceTypeForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item
          label="险种名称"
          style="width: 100%"
          prop="insureTypeName"
        >
          <el-input
            v-model="addInsuranceTypeForm.insureTypeName"
            placeholder="险种名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="顺序" style="width: 100%" prop="sort">
          <el-input
            v-model="addInsuranceTypeForm.sort"
            placeholder="顺序"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cance">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import viewOrExamine from "./viewOrExamine.vue";

export default {
  components: { viewOrExamine },
  data() {
    return {
      insureTypeTitle: "添加险种",
      editId: "",
      addInsuranceTypeForm: {
        insureTypeName: "",
        sort: "",
      },
      dialogVisible: false,
      // form: {
      //     user: '',
      //     region: ''
      // },
      tableData: [],
      tableHeight: 0,
      rules: {
        insureTypeName: [
          { required: true, message: "请输入险种名称", trigger: "blur" },
        ],
        sort: [{ required: true, message: "请输入顺序", trigger: "blur" }],
      },
      expandCols: [],
    };
  },
  methods: {
    deleteInsure(row) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // const params = [row.insureInfoId]
          this.$delete(`/insure/insureinfo/${row.insureInfoId}`).then((res) => {
            if (res && res.code * 1 === 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getTableData();
            }
          });
        })
        .catch(() => {
          //
        });
    },
    determine() {
      this.$refs.addInsuranceTypeForm.validate((valid) => {
        if (valid) {
          const url = this.editId ? "insure/type" : "insure/type";
          const func = this.editId ? "$put" : "$post";
          const params = this.editId
            ? { ...this.addInsuranceTypeForm, insureTypeId: this.editId }
            : this.addInsuranceTypeForm;
          this[func](url, params).then((res) => {
            if (res && res.code * 1 === 200) {
              this.$message({
                type: "success",
                message: this.editId ? "修改成功" : "新增成功",
              });
              this.$refs.addInsuranceTypeForm.resetFields();
              this.dialogVisible = false;
              this.getTableData();
            }
          });
        }
      });
    },
    delInsuranceType(insureTypeId) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$delete(`/insure/type/${insureTypeId}`).then((res) => {
            if (res && res.code * 1 === 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getTableData();
            }
          });
        })
        .catch(() => {
          //
        });
    },
    cance() {
      this.$refs.addInsuranceTypeForm.resetFields();
      this.dialogVisible = false;
    },
    addInsuranceType() {
      this.$nextTick(() => {
        this.insureTypeTitle = "添加险种";
        this.dialogVisible = true;
        this.addInsuranceTypeForm.insureTypeName = "";
        this.addInsuranceTypeForm.sort = "";
        this.editId = "";
      });
    },
    editInsuranceType(row) {
      this.$nextTick(() => {
        this.insureTypeTitle = "修改险种";
        this.dialogVisible = true;
        this.addInsuranceTypeForm.insureTypeName = row.insureTypeName;
        this.addInsuranceTypeForm.sort = row.sort;
        this.editId = row.insureTypeId;
      });
    },
    addInsurance(row) {
      this.getVipLevelList().then((res) => {
        this.$refs.viewOrExamine.dialogFormVisible = true;
        this.$refs.viewOrExamine.insureTypeId = row.insureTypeId;
        this.$refs.viewOrExamine.title = "添加保险";
        this.$refs.viewOrExamine.vipLevelList = res;

        this.$refs.viewOrExamine.ruleForm = {
          insureName: "",
          insureKind: "",
          insureIntroduction: "",
          insureModality: '',
          clause: "",
          noProtectGoods: "",
          rate: "",
          minInsureFee: "50",
          statement: "",
          templateCode: "",
        };
        this.$refs.viewOrExamine.insureInfoId = '';
        this.$refs.viewOrExamine.scopeOfProtectionList = [];
        this.$refs.viewOrExamine.excessList = [];
        this.$refs.viewOrExamine.extendInsureList = [];
        this.$refs.viewOrExamine.goodsList = [
          {
            insureKindName: "基本险",
            insureRateGoodss: [
              {
                goodsTypeName: "",
                goodsTypeRate: "",
              },
            ],
          },
          {
            insureKindName: "综合险",
            insureRateGoodss: [
              {
                goodsTypeName: "",
                goodsTypeRate: "",
              },
            ],
          },
        ];
      });
    },
    editInsure(row) {
      this.getVipLevelList().then((res) => {
        this.$refs.viewOrExamine.dialogFormVisible = true;
        this.$refs.viewOrExamine.insureTypeId = row.insureTypeId;
        this.$refs.viewOrExamine.title = "修改保险";
        this.$refs.viewOrExamine.vipLevelList = res;
        this.$get(`/insure/insureinfo/${row.insureInfoId}`).then((res) => {
          this.$refs.viewOrExamine.ruleForm = {
            insureName: res.data.insureName,
            insureKind: res.data.insureKind * 1,
            insureIntroduction: res.data.insureIntroduction,
            insureModality: res.data.insureModality,
            clause: res.data.clause,
            noProtectGoods: res.data.noProtectGoods,
            rate: res.data.rate,
            minInsureFee: res.data.minInsureFee,
            statement: res.data.statement,
            templateCode: res.data.templateCode,
          };
          this.$refs.viewOrExamine.insureInfoId = row.insureInfoId;
          res.data.insureConfigSafeguards && res.data.insureConfigSafeguards.forEach((item) => {
            item.basicStatus = !!(item.basicStatus * 1);
            item.synthesisStatus = !!(item.synthesisStatus * 1);
          });
          console.log('res.data.insureConfigSafeguards', res.data.insureConfigSafeguards)
          this.$refs.viewOrExamine.scopeOfProtectionList =
            res.data.insureConfigSafeguards || [];
          this.$refs.viewOrExamine.excessList = res.data.insureConfigDeductions || [];
          this.$refs.viewOrExamine.extendInsureList =
            res.data.insureRateExtends || [];
          this.$refs.viewOrExamine.goodsList = res.data.insureRateKinds || [];
        });
      });
    },

    getTableData() {
      const params = {
        // ...deepClone(this.form)
      };
      this.$get("/insure/type/list", params).then((res) => {
        this.tableData = res.data;
        // this.tableData.forEach(item => {
        //   if (this.expandCols.includes(item.insureTypeId)) {
        //     item._expanded = true
        //   }
        // })
        res.data.forEach((item) => {
          this.getChildren(item);
        });
      });
    },
    getChildren(row) {
      const params = {
        insureTypeId: row.insureTypeId,
        insureName: row.insureName,
      };
      this.$get(`/insure/insureinfo/list`, params).then((res) => {
        const item = this.tableData.find(
          (item) => item.insureTypeId === row.insureTypeId
        );
        if (res && res.code * 1 === 200) {
          this.$set(item, "children", res.rows);
        } else {
          this.$set(item, "children", []);
        }
      });
    },
    getVipLevelList() {
      return this.$get("/customer/vip/list").then((res) => {
        if (res && res.code * 1 === 200) {
          res.rows.forEach((item, index) => {
            item.rate = "";
          });
          return res.rows;
        } else {
          return [];
        }
      });
    },
  },
  mounted() {
    this.getTableData();
    // this.getVipLevelList();
  },
};
</script>
<style scoped lang="scss">
.form-inline ::v-deep {
  width: 100%;

  .el-form-item__label {
    // padding: 0;
  }
}
</style>
